<template>
  <m-popup :visible.sync="show" height="85vh" @close="handleClose" @open="handleOpen">
    <view slot="header" class="header">
      <text>{{ type === 0 ? '零出' : '整出' }}-库存选择（可多选） </text>
      <text class="subTitle">快来选择一个或多个以下空闲仓库库存吧</text>
    </view>
    <view class="box">
      <template v-if="list.length">
        <m-checkbox-group ref="checkboxGroup" v-model="checkbox">
          <m-checkbox-button
            :label="item.stationId"
            v-for="(item, index) in list"
            :key="index + '_' + item.stationId"
            width="48.15%"
          >
            <view class="df aic jcsb" style="padding-top: 10rpx">
              <text class="title">{{ item.stationCode }}</text>
              <text class="kc">库存：{{ item.stockQuantity }}</text>
            </view>
            <text class="code">{{ item.skuCode }}</text>
          </m-checkbox-button>
        </m-checkbox-group>
      </template>

      <m-empty v-else />
    </view>
    <view slot="footer" class="footer">
      <m-button size="xl" type="default" plain width="26%" @click="handleClose">取消 </m-button>
      <m-button size="xl" width="70%" @click="handleOk"> 保存 </m-button>
    </view>
  </m-popup>
</template>

<script>
import { getWholeOutStock, getNotWholeOutStock } from '@/api/modules/out-work'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    skuId: {
      type: [Number, String],
      default: null,
    },
    type: {
      type: Number,
      default: 0,
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getTitle() {
      return (str) => {
        const { keyWorld } = this
        return (str || '').replace(new RegExp(keyWorld, 'gi'), `<span style='color:red'>${keyWorld}</span>`)
      }
    },
  },
  watch: {
    visible(val) {
      this.show = val
    },
  },
  data() {
    return {
      keyWorld: '',
      checkbox: this.value,
      list: [],
      show: false,
    }
  },
  methods: {
    async handleOpen() {
      const api = {
        1: getWholeOutStock,
        0: getNotWholeOutStock,
      }
      const { data } = await api[this.type](this.skuId)
      this.list = data
      this.checkbox = this.value
    },
    handleOk() {
      const total = this.list
        .filter((item) => this.checkbox.includes(item.stationId))
        .reduce((pre, cur) => {
          pre += +cur.stockQuantity
          return pre
        }, 0)

      this.$emit('update:num', total)
      this.$emit('input', this.checkbox)
      this.$emit('confirm', this.checkbox)
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: -40rpx;
  text {
    text-align: left;
    margin-left: 30rpx;
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .subTitle {
    font-size: 30rpx;
    color: #4b5661;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
}
.box {
  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #748da7;
  }
  .kc {
    color: #ff8726;
    font-size: 24rpx;
  }
  .code {
    color: #899aa2;
    font-size: 28rpx;
    margin-top: 22rpx;
    display: block;
  }

  ::v-deep {
    .checkbox {
      &:nth-child(2n) {
        margin-right: 0;
      }
      &--checked {
        position: relative;
        &::after {
          display: block;
          content: '';
          width: 32rpx;
          height: 24rpx;
          background: url('@/static/right-top-icon.png') no-repeat;
          background-size: 100% 100%;
          position: absolute;
          right: -4rpx;
          top: -4rpx;
        }
      }
    }
  }
}
</style>
